<template>
  <div id="app">
    <VFormDesigner
      :designer-config="designerConfig"
      :field-list-data="fieldListData"
      :global-dsv="globalDsv"
      ref="vfdRef"
    >
      <!--
      <template #customToolButtons>
        <el-button link @click="changeThemePrimaryColor">改色</el-button>
      </template>
      -->
    </VFormDesigner>
  </div>
</template>

<script>
import VFormDesigner from "./components/form-designer/index.vue";

export default {
  name: "App",
  components: {
    VFormDesigner,
  },
  data() {
    return {
      formJson: {
        widgetList: [],
        formConfig: {
          modelName: "formData",
          refName: "vForm",
          rulesName: "rules",
          labelWidth: 80,
          labelPosition: "top",
          size: "",
          labelAlign: "label-left-align",
          cssCode: "",
          customClass: "",
          functions: "",
          layoutType: "PC",
          onFormCreated: "",
          onFormMounted: "",
          onFormDataChange: "",
          onFormValidate: "",
        },
      },
      formData: {},
      optionData: {},

      designerConfig: {
        languageMenu: false, //是否显示语言切换菜单
        externalLink: false, //是否显示GitHub、文档等外部链接
        formTemplates: false, //是否显示表单模板
        chartLib: false, //是否显示图表组件库
        metadataLib: false, //是否显示元数据
        layoutTypeButton: false, //是否显示表单布局适配按钮组
        eventCollapse: true, //是否显示组件事件属性折叠面板
        widgetNameReadonly: false, //禁止修改组件名称

        clearDesignerButton: true, //是否显示清空设计器按钮
        previewFormButton: true, //是否显示预览表单按钮
        importJsonButton: false, //是否显示导入JSON按钮
        exportJsonButton: false, //是否显示导出JSON器按钮
        exportCodeButton: false, //是否显示导出代码按钮
        generateSFCButton: false, //是否显示生成SFC按钮
        logoHeader: false, //是否显示Logo头部区域（仅Pro）

        toolbarMaxWidth: 450, //设计器工具按钮栏最大宽度（单位像素）
        toolbarMinWidth: 300, //设计器工具按钮栏最小宽度（单位像素）

        productName: "", //自定义表单设计器名称，对应“VForm Pro”（仅Pro）
        productTitle: "", //自定义表单设计器标题，对应“表单设计器”（仅Pro）

        presetCssCode: "", //设计器预设CSS样式代码
        languageName: "zh-CN", //界面语言，默认显示中文

        resetFormJson: false, //是否在设计器初始化时将表单内容重置为空
      },

      /* 集成后端字段名称选择功能--演示 */
      fieldListData: {
        fieldList: [
          {
            label: "客户名称",
            name: "accountName",
          },
          {
            label: "手机号",
            name: "mobilePhone",
          },
          {
            label: "订单明细.产品编号",
            name: "productNo",
          },
        ],
        subFormList: [
          {
            label: "订单明细",
            name: "orderDetail",
          },
          {
            label: "发货明细",
            name: "deliveryDetail",
          },
        ],
      },

      //全局数据源变量
      globalDsv: {
        testApiHost: "http://www.test.com/api"
      },
    };
  },
  computed: {
    //
  },
  methods: {
    doTest() {
      console.info(
        "form data schema is: " +
          JSON.stringify(this.$refs.vfdRef.buildFormDataSchema())
      );
    },

    changeThemePrimaryColor() {
      const bodyElement = document.getElementsByTagName("body")[0];
      bodyElement.style.setProperty("--vf-color-primary", "red");
      bodyElement.style.setProperty("--el-color-primary", "red");
    },
  },
};
</script>

<style lang="scss">
#app {
  height: 100%;
}
</style>
